<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div
        class="title"
        v-drag="['.ba-operate-dialog', '.el-dialog__header']"
        v-zoom="'.ba-operate-dialog'"
      >
        {{ baTable.form.operate !== "edit" ? "添加" : "编辑" }}
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="baTable.onSubmit(formRef)"
          :model="baTable.form.items"
          label-position="right"
          :label-width="baTable.form.labelWidth + 'px'"
          :rules="rules"
          v-if="!baTable.form.loading"
        >
          <FormItem
            type="remoteSelect"
            prop="parentId"
            label="上级菜单"
            v-model="baTable.form.items!.parentId"
            placeholder="请选择"
            :input-attr="{
              params: { isTree: true },
              field: 'menuName',
              'remote-url': baTable.api.actionUrl.get('list'),
            }"
          />
          <FormItem
            label="规则类型"
            v-model="baTable.form.items!.menuType"
            type="radio"
            :data="{
              content: {
                M: '菜单目录',
                C: '菜单项',
                F: '页面按钮',
              },
              childrenAttr: { border: true },
            }"
          />
          <!-- <el-form-item prop="title" label="菜单标题">
            <el-input v-model="baTable.form.items!.title" type="string" placeholder="请输入菜单标题"></el-input>
          </el-form-item> -->
          <el-form-item prop="menuName" label="菜单名称">
            <el-input
              v-model="baTable.form.items!.menuName"
              type="string"
              placeholder=""
            ></el-input>
          </el-form-item>
          <FormItem
            v-if="baTable.form.items!.menuType != 'F'"
            label="菜单类型"
            v-model="baTable.form.items!.isFrame"
            type="radio"
            :data="{
              content: {
                1: '选项卡',
                0: '链接（站外）',
              },
              childrenAttr: { border: true },
            }"
          />
          <el-form-item
            prop="path"
            v-if="baTable.form.items!.menuType != 'F'"
            label="路由路径"
          >
            <el-input
              v-model="baTable.form.items!.path"
              type="string"
              placeholder="路由路径 如 auth/menu"
            ></el-input>
            <div class="block-help">如果为外部链接请以 http(s):// 为开头</div>
          </el-form-item>
          <FormItem
            v-if="baTable.form.operate && baTable.form.items!.menuType != 'F'"
            type="icon"
            label="菜单图标"
            v-model="baTable.form.items!.icon"
            :input-attr="{ 'show-icon-name': true }"
          />
          <el-form-item
            prop="url"
            v-if="baTable.form.items!.menuType != 'F'"
            label="链接地址"
          >
            <el-input
              v-model="baTable.form.items!.url"
              type="string"
              placeholder="请输入链接或iframe的URL地址"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="component"
            v-if="baTable.form.items!.menuType !== 'F'"
            label="组件路径"
          >
            <el-input
              v-model="baTable.form.items!.component"
              type="string"
              placeholder="组件路径, 请以/src为开头, 如 /src/views/backend/dashboard"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="perms"
            v-if="baTable.form.items!.menuType !== 'M'"
            label="权限字符"
          >
            <el-input
              v-model="baTable.form.items!.perms"
              type="string"
              placeholder="system:user:list"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input
              v-model="baTable.form.items!.orderNum"
              type="number"
              placeholder="请输入菜单规则权重（排序依据）"
            ></el-input>
          </el-form-item>
          <el-form-item label="规则备注">
            <el-input
              @keyup.enter.stop=""
              @keyup.ctrl.enter="baTable.onSubmit(formRef)"
              v-model="baTable.form.items!.remark"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="注解"
            ></el-input>
          </el-form-item>
          <FormItem
            v-if="baTable.form.items!.menuType == 'C'"
            label="缓存"
            v-model="baTable.form.items!.isCache"
            type="radio"
            :data="{
              content: { 0: '缓存', 1: '不缓存' },
              childrenAttr: { border: true },
            }"
          />
          <!-- <FormItem
            v-if="baTable.form.items!.menuType !== 'F'"
            label="显示"
            v-model="baTable.form.items!.visible"
            type="radio"
            :data="{
              content: { 0: '显示', 1: '隐藏' },
              childrenAttr: { border: true },
            }"
          /> -->
          <el-form-item
            label="显示"
            prop="visible"
            v-if="baTable.form.items!.menuType !== 'F'"
          >
            <el-radio-group v-model="baTable.form.items!.visible">
              <el-radio
                v-for="(item, index) in state.visibleDict"
                :key="index"
                :label="item.dictValue"
                border
                >{{ item.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <!-- <FormItem
            v-if="baTable.form.items!.menuType !== 'F'"
            label="状态"
            v-model="baTable.form.items!.status"
            type="radio"
            :data="{
              content: { 0: '正常', 1: '禁用' },
              childrenAttr: { border: true },
            }"
          /> -->
          <el-form-item
            label="状态"
            prop="status"
          >
            <el-radio-group v-model="baTable.form.items!.status">
              <el-radio
                v-for="(item, index) in state.statusDict"
                :key="index"
                :label="item.dictValue"
                border
                >{{ item.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="baTable.onSubmit(formRef)"
          type="primary"
        >
          {{
            baTable.form.operateIds &&
            (baTable.form.operateIds.length > 1 ||
              (baTable.form.operateIds as TableRow).parentId)
              ? "保存并编辑下一项"
              : "保存"
          }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import type { TableRow } from "@/utils/baTable"; //表格列行类型
import { reactive, ref, inject, onMounted } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormItemRule, FormRules } from "element-plus";
import FormItem from "@/components/formItem/index.vue";

//接受来自父组件的注入
const baTable = inject("baTable") as baTableClass;
const dictionary = inject("dictionary") as any;
const formRef = ref<InstanceType<typeof ElForm>>();

const state: {
  visibleDict: anyObj[];
  statusDict: anyObj[];
} = reactive({
  visibleDict: [],
  statusDict: [],
});

const rules = reactive<FormRules>({
  title: [
    {
      required: true,
      message: "路由标题（菜单标题）",
      trigger: "blur",
    },
  ],
  menuName: [
    {
      required: true,
      message: "路由名称（菜单名称）",
      trigger: "blur",
    },
  ],
  path: [
    {
      required: true,
      message: "路由路径",
      trigger: "blur",
    },
  ],
  // component: [
  //   {
  //     required: true,
  //     message: "组件路径",
  //     trigger: "blur",
  //   },
  // ],
});

onMounted(() => {
  //获取菜单显影字典状态
  dictionary.getDictInfo("sys_show_hide").then((res: any) => {
    state.visibleDict = res;
  });
  //获取菜单状态字典状态
  dictionary.getDictInfo("sys_menu_status").then((res: any) => {
    state.statusDict = res;
  });
});
/**
 * :close-on-click-modal="false" 是否可以通过点击 modal 关闭 Dialog
 * model-value / v-model :model-value可以打开dialog v-model不行
 * draggable 可拖动对话框
 */
</script>
<style lang="scss" scoped>
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
</style>
